<template>
    <div class="singleImageUpload2 upload-container">
      <el-upload
        :data="dataObj"
        :multiple="false"
        :show-file-list="false"
        :on-success="handleImageSuccess"
        class="image-uploader"
        drag
        action="https://httpbin.org/post"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          Drag或<em>点击上传</em>
        </div>
      </el-upload>
      <div v-show="imageUrl.length>0" class="image-preview">
        <div v-show="imageUrl.length>1" class="image-preview-wrapper">
          <img :src="imageUrl">
          <div class="image-preview-action">
            <i class="el-icon-delete" @click="rmImage" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getToken } from '@/api/qiniu'
  export default {
    name: 'SingleImageUpload2',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        tempUrl: '',
        dataObj: { token: '', key: '' }
      }
    },
    computed: {
      imageUrl() {
        return this.value
      }
    },
    methods: {
      rmImage() {
        this.emitInput('')
      },
      emitInput(val) {
        this.$emit('input', val)
      },
      handleImageSuccess() {
        this.emitInput(this.tempUrl)
      },
      beforeUpload() {
        const _self = this
        return new Promise((resolve, reject) => {
          getToken().then(response => {
            const key = response.data.qiniu_key
            const token = response.data.qiniu_token
            _self._data.dataObj.token = token
            _self._data.dataObj.key = key
            this.tempUrl = response.data.qiniu_url
            resolve(true)
          }).catch(() => {
            reject(false)
          })
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .upload-container {
    width: 100%;
    height: 100%;
    position: relative;
    .image-uploader {
      height: 100%;
    }
    .image-preview {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      border: 1px dashed #d9d9d9;
      .image-preview-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .image-preview-action {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, .5);
        transition: opacity .3s;
        cursor: pointer;
        text-align: center;
        line-height: 200px;
        .el-icon-delete {
          font-size: 36px;
        }
      }
      &:hover {
        .image-preview-action {
          opacity: 1;
        }
      }
    }
  }
  </style>